<template>
  <div class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAllChecked" >
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
        <li :class="{completed:item.flag, editing:item.id === nowId}" v-for="item in showList" :key="item.id">
          <div class="view">
            <input class="toggle" type="checkbox" :checked="item.flag" @change="changeStatus(item.id)">
            <label @dblclick="showEdit(item.id)" >{{item.name}}</label>
            <button class="destroy" @click="delTodo(item.id)"></button>
            <div class="time">{{item.time | formatTime()}}</div>
          </div>
          <input class="edit" :value="item.name" @blur="hideEdit(item.id)" @keyup.enter="editTodo(item.id, $event)">
        </li>
      </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { list } from '@/ts/index.ts'

export const bus = new Vue()
@Component({
  components: {},
  name: 'Main',
  filters: {
    formatTime (value: Date, str = 'YYYY-DD-MM hh:mm:ss') {
      const year: number = value.getFullYear()
      const month: number = value.getMonth()
      const date: number = value.getDate()
      const hours: number = value.getHours()
      const minutes: number = value.getMinutes()
      const seconds: number = value.getSeconds()
      const f1 = str[4]
      const f2 = str[13]
      return `${year}${f1}${month}${f1}${date} ${hours}${f2}${minutes}${f2}${seconds}`
    }
  }
})
export default class Main extends Vue {
  @Prop({ type: Function }) readonly getUnfinishCount!: (unfinishCount: number) => void
  @Prop({ type: String, default: 'All' }) readonly type!: string
  @Prop({ type: Function }) readonly showClearComplated!: (isShowClearComplated: boolean) => void
  nowId = -1

  list: Array<list> = [
    { id: 0, name: '吃鸡', flag: true, time: new Date() },
    { id: 1, name: '王者荣耀', flag: false, time: new Date() },
    { id: 2, name: '刷抖音', flag: true, time: new Date() },
    { id: 3, name: '撩妹', flag: false, time: new Date() }
  ]

  @Watch('list', { deep: true, immediate: true })
  alertList (newVal: list[]) {
    setTimeout(() => {
      if (!newVal.length) alert('目前没有任何事项待办')
    }, 500)
  }

  get showList () {
    let list: list[] | [] = []
    switch (this.type) {
      case 'All':
        list = this.list
        break
      case 'Active':
        list = this.list.filter((item: list) => !item.flag)
        break
      case 'Completed':
        list = this.list.filter((item: list) => item.flag)
        break
      default:
        break
    }
    return list
  }

  get unfinishCount () {
    const unfinishTodo: list[] | [] = this.list.filter((item: list) => !item.flag)
    const length = unfinishTodo.length
    return length
  }

  get isShowClearComplated () {
    return this.list.some((item: list) => item.flag)
  }

  get isAllChecked () {
    return this.list.every((item: list) => item.flag)
  }

  set isAllChecked (value) {
    this.list.forEach((item: list) => {
      item.flag = value
    })
    this.$emit('getUnfinishCount', this.unfinishCount)
  }

  showEdit (id: number) {
    this.nowId = id
  }

  hideEdit () {
    this.nowId = -1
  }

  editTodo (id: number, e: Event) {
    const name: string = (e.target as HTMLInputElement).value
    const todo: list = this.list.find((item: list) => item.id === id) as list
    todo.name = name
    todo.time = new Date()
    this.hideEdit()
  }

  changeStatus (id: number) {
    const todo: list = this.list.find((item: list) => item.id === id) as list
    todo.flag = !todo.flag
    this.$emit('getUnfinishCount', this.unfinishCount)
    this.$emit('showClearComplated', this.isShowClearComplated)
  }

  delTodo (id: number) {
    this.list = this.list.filter((item: list) => item.id !== id)
  }

  clearCompleted () {
    this.list = this.list.filter((item: list) => !item.flag)
  }

  created () {
    bus.$on('addTodo', (name: string, date: Date) => {
      const length: number = this.list.length || 0
      this.list.unshift({ id: length, name, flag: false, time: date })
    })
    bus.$on('clearCompleted', this.clearCompleted)
    this.$emit('getUnfinishCount', this.unfinishCount)
    this.$emit('showClearComplated', this.isShowClearComplated)
  }
}
</script>

<style lang="scss" scoped>
 .view {
   position: relative;
   .time {
     position: absolute;
     bottom: 0;
     right: 20px;
     font-size: 6px;
     color: #999
   }
 }
</style>
